<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css样式优先级</title>
    <style>
        #hello{
            color: orange;
        }
        .hello{
            color: blue;
        }
        p{
            color: pink;
        }
        p:last-of-type{
            color: purple;
        }


    </style>
</head>
<body>
    <div style="color: blue" id="hello">Hello JavaScript！</div>

    <div id="hello" class="hello">Hello JavaScript！</div>

    <p class="hello">Hello JavaScript！</p>

    <p>Hello JavaScript！</p>


    <!-- 
        css选择器优先级            

            权重计算规则
            1. 第零等：!important， 大过了其它任何设置。
            2. 第一等：代表内联样式，如: style=””，权值为1000。
            3. 第二等：代表ID选择器，如：#content，权值为0100。
            4. 第三等：代表类，伪类和属性选择器，如.content，权值为0010。
            5. 第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。
            6. 第五等：通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
            7. 第六等：继承的样式没有权值。
        
            遇到样式冲突时看优先级，优先级相同采取就近原则，选择后出现的样式
     -->

    
</body>
</html>